<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <edit-container ref="containerRef" v-bind="containerConfig">
    <lg-form ref="formRef" v-loading="loading" :schema="schema" v-bind="formConfig">
      <template #password="{ data }">
        <t-input
          v-model="data.password"
          size="large"
          :type="showPsw ? 'text' : 'password'"
          clearable
          placeholder="请输入数据库密码"
        >
          <template #suffix-icon>
            <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
          </template>
        </t-input>
      </template>
    </lg-form>
  </edit-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EditContainer, useEditContainer } from '@/components';
import { LgForm } from '@/soar';
import schema from './schema';
import api from './api';

const emits = defineEmits(['ok']);

const containerRef = ref();
const formRef = ref();
const showPsw = ref(false);

const { containerConfig, formConfig, loading, open } = useEditContainer<any>({
  header: '数据源',
  containerRef,
  formRef,
  getData: (params: any) => api.detail(params.id),
  onOk: async ({ values, data, params, isUpdate, changed }) => {
    if (changed) {
      values.id = data.id;
      await api.saveOrUpdate(values, isUpdate);
      emits('ok', values);
    }
  },
  containerProps: {
    width: '600px',
  },
  data: {
    status: 0,
    type: 'com.alibaba.druid.pool.DruidDataSource',
    url: 'jdbc:mysql://127.0.0.1:3306/lg-soar?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC&serverTimezone=Asia/Shanghai',
    username: 'root',
    password: 'root',
  },
});

defineExpose({ open });
</script>
